<template>
<div class="designArticle">
<div class="contents">
  <writeArticle @change="change" :types="types" />
  <div class="item-list" v-for="(item,index) in designArticle">
    <img src="/static/img/sy_img1.jpg" />
    <div class="introduction">
      <h3>{{item.title}}<a class="badge">new</a></h3>
      <h5 class="classification">{{item.cate}}</h5>
      <p>{{item.ct}}</p>
      <a href="javascript:;" class="go-icon"></a>
      <a class="deleteArticle" @click="deleteArticle(index)">删除文章</a>
    </div>
  </div>
</div>
  <pagination :page="page" :page-size="pageSize" :total="total" :max-page="maxPage" @pagehandler="pageHandler" />
</div>
</template>
<script>
  import pagination from "../plugin/pagination";
  import writeArticle from "../plugin/writeArticle";
    export default {
        name: "designArticle",
        components:{
        pagination,
        writeArticle
      },
      data(){
          return{
            page: 1,
            pageSize: 5,
            total: 0,
            maxPage:5,
            designArticle:[{title:"北京市中国首都",cate:"设计文章",ct:"北京市全国政治中心"}],
            types:"写设计"
          }
      },
      created(){
       /* this.getData();*/
      },
      methods: {
         pageHandler: function (page) {
           this.page = page;
        },
        // getData(){
        //   this.$http.get("http://localhost:8081/article/designArticle").then(({data})=>{
        //     this.designArticle = data;
        //     this.total=data.length;
        //   })
        // },
        change(msg){
              this.designArticle.unshift(msg)
        },
        deleteArticle(index){
           this.$confirm("此操作将永久删除该文件，是否继续？","提示",{
             confirmButtonText:"确定",
             cancelButtonText:"取消",
             type:"warning"
           }).then(()=>{
          /*   this.$http.post("http://localhost:8081/article/designArticle/delete",{title}).then(()=>{*/
              /* this.getData();*/
               this.designArticle.splice(index,1);
               this.$message({
                 type:"success",
                 message:"删除成功!"
               });
      /*       });*/
           }).catch(()=>{
             this.$message({
               type:'info',
               message:"已取消删除"
             });
           });

        }
      }
    }
</script>
<style lang="scss" scoped>
@import "../../assets/css/designArticle";
</style>
